<template>
  <div>
    <video ref="videoPlayer" class="video-js" />
  </div>
</template>

<script>
import videojs from 'video.js'
export default {
  name: 'hlsVideo',
  data() {
    return {
      videoOptions: {
        autoplay: 'muted',
        controls: true,
        sources: [
          {
            src: 'https://outin-e1950607dc4711ea95f900163e1c7426.oss-cn-shanghai.aliyuncs.com/46197fba7a8145a081c1d6e5340a51ea/video/c748c9c65227490ca9e352b87db304e6-e808650f57085dd07782036452675095-video-od.m3u8?Expires=1600075785&OSSAccessKeyId=LTAIxSaOfEzCnBOj&Signature=ct1L9H9kWqflzq2lCxPLClb3RS8%3D',
            type: 'application/x-mpegURL'
          }
        ],
        width: '800px',
        height: '480px'
      }
    }
  },
  mounted() {
    this.player = videojs(this.$refs.videoPlayer, this.videoOptions, () => {
      console.log('onPlayReady', this)
    })
  }
}
</script>

<style lang="scss" scoped>

</style>
